<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="MIUI 计算器 实现">
    <meta name="description" content="这是一个简易的MIUI计算器">
    <meta name="author" content="sudgao">
    <title>大米手机9计算器</title>
    <link rel="icon" href="./img/favicon.ico">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/reset.min.css">
    <script src="./font/iconfont.js"></script>
    <style>
        body{
            background-color: #bfa;
        }
        .icon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          /* fill: currentColor; */
          overflow: hidden;
        }
    </style>
</head>
<body>
    <main id="phone">
        <div class="screen">
            <div class="top">
                <div class="left">
                    <span class="time">下午1:03</span>
                    <span>|</span>
                    <span>2.0 K/s</span>
                </div>
                <div class="right">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-xinhao"></use>
                    </svg>
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-Wi-Fixinhao"></use>
                    </svg>
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-iconset0249"></use>
                    </svg>
                </div>
            </div>
            <div class="setting">
                <div class="setting-icon">
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                </div>
                
            </div>
            <div class="function">
                <div class="fun">
                    <span class="fun-active">计算</span>
                    <span>换算</span>
                    <span>税贷</span>
                </div>
            </div>
            <div id="space-padding" class="space-padding-common"></div>
            <div class="progress calc-small">
                <div id="progress" class="calc-wrapper">
                </div>
            </div>
            <div  class="result calc-large">
                <div id="result" class="calc-wrapper">0</div>
            </div>
            <div class="key-board">
                <div id="board-common" class="board-common">
                    <ul class="common">
                        <li class="row-li">
                            <button id="c-ac" class="key-btn color-key">AC</button>
                            <button id="c-del" class="key-btn color-key">
                                <svg class="icon svg-icon" aria-hidden="true">
                                    <use xlink:href="#icon-jurassic_last"></use>
                                </svg>
                            </button>
                            <button id="c-precent" class="key-btn color-key text-key">%</button>
                            <button id="c-div" class="key-btn color-key text-key">/</button>
                        </li>
                        
                        <li class="row-li">
                            <button id="c-7" class="key-btn text-key">7</button>
                            <button id="c-8" class="key-btn text-key">8</button>
                            <button id="c-9" class="key-btn text-key">9</button>
                            <button id="c-mul" class="key-btn color-key text-key">×</button>
                        </li>  
                        <li class="row-li">
                            <button id="c-4" class="key-btn text-key">4</button>
                            <button id="c-5" class="key-btn text-key">5</button>
                            <button id="c-6" class="key-btn text-key">6</button>
                            <button id="c-minus" class="key-btn color-key text-key">-</button>
                        </li>
                        <li class="row-li">
                            <button id="c-1" class="key-btn text-key">1</button>
                            <button id="c-2" class="key-btn text-key">2</button>
                            <button id="c-3" class="key-btn text-key">3</button>
                            <button id="c-plus" class="key-btn color-key text-key">+</button>
                        </li>
                        <li class="row-li">
                            <button id="c-change" class="key-btn color-key">
                                <svg class="icon svg-icon" aria-hidden="true">
                                    <use xlink:href="#icon-zhuanhuan"></use>
                                </svg>
                            </button>
                            <button id="c-0" class="key-btn text-key">0</button>
                            <button id="c-point" class="key-btn text-key">.</button>
                            <button id="c-equal" class="key-btn color-key">=</button>
                        </li>
                    </ul>
                </div>
                <div id="board-sci" class="board-sci not-show">
                    <ul class="sci">
                        <li class="row-li">
                            <button id="s-2nd" class="key-btn tri-font">2nd</button>
                            <button id="s-deg" class="key-btn  tri-font">deg</button>
                            <button id="s-sin" class="key-btn tri-font text-key">sin</button>
                            <button id="s-cos" class="key-btn tri-font text-key">cos</button>
                            <button id="s-tan" class="key-btn  tri-font text-key">tan</button>
                        </li>
                        <li class="row-li">
                            <button id="s-power" class="key-btn  half-font-larger">x<sup>y</sup></button>
                            <button id="s-lg" class="key-btn  half-font text-key">lg</button>
                            <button id="s-ln" class="key-btn half-font text-key">ln</button>
                            <button id="s-left-bracket" class="key-btn half-font text-key">(</button>
                            <button id="s-right-bracket" class="key-btn  half-font text-key">)</button>
                        </li>
                        <li class="row-li">
                            <button id="s-sqrt" class="key-btn  half-font text-key">√￣</button>
                            <button id="s-ac" class="key-btn color-key normal-font">AC</button>
                            <button id="s-del" class="key-btn color-key normal-font">
                                 <svg class="icon svg-icon" aria-hidden="true">
                                    <use xlink:href="#icon-jurassic_last"></use>
                                </svg>
                            </button>
                            <button id="s-percent" class="key-btn color-key normal-font text-key">%</button>
                            <button id="s-div" class="key-btn color-key normal-font text-key">/</button>
                        </li>
                        
                        <li class="row-li">
                            <button id="s-fact" class="key-btn half-font-larger">x!</button>
                            <button id="s-7" class="key-btn normal-font text-key">7</button>
                            <button id="s-8" class="key-btn normal-font text-key">8</button>
                            <button id="s-9" class="key-btn normal-font text-key">9</button>
                            <button id="s-mul" class="key-btn color-key normal-font text-key">×</button>
                        </li>
                        <li class="row-li">
                            <button id="s-back" class="key-btn tri-font ">1/x</button>
                            <button id="s-4" class="key-btn normal-font text-key">4</button>
                            <button id="s-5" class="key-btn normal-font text-key">5</button>
                            <button id="s-6" class="key-btn normal-font text-key">6</button>
                            <button id="s-minus" class="key-btn color-key normal-font text-key">-</button>
                        </li>
                        <li class="row-li">
                            <button id="s-pi" class="key-btn half-font text-key">π</button>
                            <button id="s-1" class="key-btn normal-font text-key">1</button>
                            <button id="s-2" class="key-btn normal-font text-key">2</button>
                            <button id="s-3" class="key-btn normal-font text-key">3</button>
                            <button id="s-plus" class="key-btn color-key normal-font text-key">+</button>
                        </li>
                        <li class="row-li">
                            <button id="s-change" class="key-btn color-key half-font">
                                <svg class="icon svg-icon" aria-hidden="true">
                                    <use xlink:href="#icon-zhuanhuan"></use>
                                </svg>
                            </button>
                            <button id="s-e" class="key-btn half-font text-key">e</button>
                            <button id="s-0" class="key-btn normal-font text-key">0</button>
                            <button id="s-point" class="key-btn normal-font text-key">.</button>
                            <button id="s-equal" class="key-btn color-key normal-font">=</button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="bottom">
                <hr class="android-bar">
            </div>
        </div>
    </main>    
</body>
<script src="./js/key_bind.js" type="module"></script>
</html>